<template>
  <view class="preview-xxxx-popup comp-wrap">
    <uni-navbar 
      :title="title" 
      :border="false"
      :fixed="true"
      :height="barHeight"
      :rightWidth="60"
      :leftIcon="!isMpAlipay"
      bgColor="transparent"
      :placeholder="false"
      :autoBack="true"
      @clickRight="backEv"
    >
      <view slot="left" v-if="!isMpAlipay">
        <image src="../../static/images/back_black2.png" class="back-icon" style="margin-left: -10rpx;"></image>
      </view>
    </uni-navbar>

    <view class="preview-wrap">
      <swiper class="hAndW100" style="overflow: hidden;" :current="point" @change="swipeChangeEv">
        <swiper-item class="SwiperItem" v-for="(item, index) in listImages" :key="index">
          <movable-area class="hAndW100 overhideAu">
            <movable-view direction="all" :disabled="disabled" :scale="scaleControl" class="hAndW100 displayIJcenter overhideAu">
              <image v-if="item.isPic" :src="item.url" mode="aspectFit" class="hAndW100" 
                @touchstart.prevent="touchImgStart(item.url)"
                @touchend.prevent="touchImgEnd"></image>
              <video 
                :id="item.id+'prev_idx'"
                v-else
                class="video_style"
                :src="item.url" 
                controls
                autoplay
                :direction="0"
                :muted="videoMuted"
                :enable-progress-gesture="false"
                object-fit="cover"
                :show-mute-btn="true"
                @click="fullVideoChange"
                @fullscreenchange="fullVideoChange"
              ></video>

              <view class="hover-bg" v-if="setCoverImg && item.isPic">
                <view v-if="!item.isTop" class="set-top-btn" @click="setTop">设为封面</view>
                <!-- <view v-else class="set-top-btn" @click="setTop">取消封面</view> -->
              </view>
            </movable-view>
          </movable-area>
        </swiper-item>
      </swiper>
    </view>

    <u-popup v-model="isViewSavePop" mode="bottom" :duration="160">
      <view style="padding:16px 16px 32px;">
  			<button @click="saveImgEv">保存到相册</button>
      </view>
		</u-popup>
  </view>
</template>

<script>
  import { getPreviewData } from '@/utils/util'
  import { isMpAlipay } from '@/utils/platform'
  import statusBarInfo from '@/pages/welfare/mixins/statusBarInfo'
  import native from '@/static/js/nativeApp';


	export default {
    mixins:[statusBarInfo],
		props: {
      setCoverImg: {
        type: Boolean,
        default: false
      }
		},
    computed: {
      title() {
        return `${this.point+1}/${this.listImages.length}`
      }
    },
		data() {
			return {
        current: 0,
				scaleControl: true,
				disabled: false,
        point: 0,
				currentId:0,
        videoMuted: true,
        isViewSavePop: false,
				listImages:[],
        touchTime: 0,
        isMpAlipay
			}
		},
		methods: {
      saveImgEv() {
        if (this.imgUrl) {
          console.log('保存');
          native.saveImg(this.imgUrl)
        }
        this.isViewSavePop = false;
      },
      touchImgEnd() {
        console.log('touchImgEnd')
        this.touchTime = 0
        clearInterval(this.touchInterval)
      },
      touchImgStart(imgUrl) {
        this.touchInterval && clearInterval(this.touchInterval)
        this.touchInterval = setInterval(() => {
          if (this.touchTime >= 800) {
            console.log('touchImgStart::', this.touchTime)

            this.touchTime = 0
            clearInterval(this.touchInterval)
            this.imgUrl = imgUrl;
            this.isViewSavePop = true
          } else {
            this.touchTime += 100
          }
        }, 100)
      },
      fullVideoChange(e) {
        this.videoMuted = false;
      },
      backEv() {
        this.$navigateBack();
      },
      deleteEv() {
        console.log(this.point);
        let imgLen = this.listImages.length;
        this.$emit('deleteItem', this.point);

        let diffLen = imgLen - 1;
        if (diffLen) {
          if (this.point >= diffLen) {
            this.point = diffLen - 1;
          }
        } else {
          this.point = 0;
          // 全部删除，退出预览
          this.backEv();
        }
      },
      // hoverClickEv() {
      //   let file = this.listImages[this.point]
      //   console.log('暂停2');
      //   if(file && !file.isPic){
      //     let videoContext = uni.createVideoContext(file.id);//创建视频实例指向video
      //     // videoContext.play();  // 播放
      //     console.log('暂停', videoContext);
      //     videoContext.pause();  // 暂停
      //   }
      // },
      setTop() {
        this.$emit('setTop', this.point)
      },
      swipeChangeEv(e) {
        console.log(e);
        this.point = e.detail.current;
      }
		},
    onLoad() {
      this.point = this.current;
      let data = getPreviewData()
      if (data) {
        this.listImages = data;
        console.log('data》》', data);
      }
      if (isMpAlipay) {
        my.setNavigationBar({
          frontColor: '#000000', // #000000 || #ffffff
          backgroundColor: '#ffffff' // #00000000 透明
        });
      }
    }
	}
</script>

<style lang="scss" scoped>
  .preview-xxxx-popup {
    ::v-deep .u-mode-center-box {
      border-radius: 0!important;
    }
  }
  .comp-wrap {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;

    .preview-wrap {
      width: 100vw;
      flex: 1;
      background-color: #fff;
    }

    .hover-bg {
      position: absolute;
      width: 100vw;
      height: 32%;
      bottom: 0;
      background: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0.00) 100%);

      .set-top-btn {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 160rpx;
        border: 1px solid #fff;
        width: 204rpx;
        height: 80rpx;
        border-radius: 80rpx;
        line-height: 80rpx;
        background: transparent;
        color: #fff;
        text-align: center;
        margin: auto;
      }
    }
  }
  
	.overhideAu{
		overflow: auto;
		white-space: normal;
		
	}
	.SwiperItem{
		overflow: scroll;
		background-color: #fff;
		touch-action: auto
	}
	.hAndW100{
		width: 100%;
		height: 100%;
	}
  .video_style {
    width: 100%;
  }
	.displayIJcenter{
		display: flex;
		justify-content: center;
		align-items: center;
	}
  .wrap-view {
    // background: linear-gradient(0deg, rgb(30, 30, 30) 0%, rgba(0, 0, 0, 0) 100%);
    // background: linear-gradient(0deg, #666 0%, rgba(0, 0, 0, 0) 100%) /100% 30% no-repeat;
    // background-position: center bottom;
    // background-size: 100% 30%;
    // background-repeat: no-repeat;
  }
</style>